<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        width: 250px;
        margin: 400px 500px;
    }
    .con{
        width: 100%;
        border: 1px solid royalblue;
        font-size: 20px;
        padding: 5px 0px 5px 5px;
        display: none;
    }
    input{
        width: 100%;
        margin-top: 100px;
        padding-right: 5px;
    }
</style>
<body>
<div class="box">
    <div class="con">

    </div>
    <input type="text">
</div>
<script>
    var input = document.querySelector('input');
    var con = document.querySelector('.con');
    input.addEventListener('keyup',function () {
        if (this.value == '') {
            con.style.display = 'none';
        } else {
            con.style.display = 'block';
            con.innerHTML = this.value;
        }
    });
    input.addEventListener('blur',function () {
        con.style.display = 'none';
    });
    input.addEventListener('focus',function () {
        if (!this.value == '') {
            con.style.display = 'block';
        }
    })
</script>
</body>
</html>